<template>
    <el-container>
        <el-header>
            <el-form inline>
                <el-form-item label="班级名称">
                    <el-input v-model="StaffStore2.search.cls_name" @change="StaffStore2.updateList()"></el-input>
                </el-form-item>
                <el-form-item label="班级专业">
                    <el-select v-model="StaffStore2.search.cls_dic_id_major" @change="StaffStore2.updateList()">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option v-for="item in category" :key="item.dic_id" :label="item.dic_name"
                            :value="item.dic_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级状态">
                    <el-select v-model="StaffStore2.search.cls_status" @change="StaffStore2.updateList()">
                        <el-option :value="0" label="-全部-"></el-option>
                        <el-option :value="1" label="开课中"></el-option>
                        <el-option :value="2" label="未开课"></el-option>
                        <el-option :value="3" label="结课"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="beginAdd" type="primary">新增</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="StaffStore2.list" style="width: 100%" border>
                <el-table-column type="index" label="#" width="60" align="center"></el-table-column>
                <el-table-column label="班级名称" align="center">
                    <template #default="{ row }">
                        <el-tag>
                            <span v-text="row.cls_name"></span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="班级专业" align="center">
                    <template #default="{ row }">
                        <el-tag>
                            <span v-text="category.find(item => item.dic_id === row.cls_dic_id_major)?.dic_name"></span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="教学老师" align="center">
                    <template #default="{ row }">
                        <el-tag>
                            <span
                                v-text="StaffStore2.list.find(item => item.stf_id === row.cls_stf_id_teacher)?.stf_name"></span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="教学老师" align="center">
                    <template #default="{ row }">
                        <el-tag>
                            <span
                                v-text="StaffStore2.list.find(item => item.stf_id === row.cls_stf_id_teacher)?.stf_name"></span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="教学老师" align="center">
                    <template #default="{ row }">
                        <el-tag>
                            <span
                                v-text="StaffStore2.list.find(item => item.stf_id === row.cls_stf_id_teacher)?.stf_name"></span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="教室" align="center">
                    <template #default="{ row }">
                        <el-tag>
                            <span
                                v-text="StaffStore1.allFuncs.find(item => item.clsr_id === row.cls_clsr_id) ? StaffStore1.allFuncs.find(item => item.clsr_id === row.cls_clsr_id)?.clsr_name : ''"></span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="开课时间" align="center">
                    <template #default="{ row }">
                        <el-tag>
                            <span v-if="row.cls_begin === null">Null</span>
                            <span v-else v-text="row.cls_begin"></span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="结课时间" align="center">
                    <template #default="{ row }">
                        <el-tag>
                            <span v-if="row.cls_end === null">Null</span>
                            <span v-else v-text="row.cls_end"></span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="班级状态" align="center">
                    <template #default="{ row }">
                        <span style="color:red; " v-if="row.cls_begin && row.cls_end">结课</span>
                        <span style="color:#67c23a; " v-else-if="row.cls_begin && !row.cls_end">开课中</span>
                        <span style="color:#e9b669; " v-else>未开课</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="cls_remark">
                    <template #default="{ row }">
                        <span v-if="row.cls_remark === null">暂无相关备注</span>
                        <span v-else :title="row.cls_remark" v-text="row.cls_remark"></span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        <el-button type="primary" @click="beginUpdate(row)">修改</el-button>
                        <el-button type="success" v-if="!row.cls_begin && !row.cls_end"
                            @click="start(row)">开课</el-button>
                        <el-button type="danger" v-else-if="row.cls_begin && !row.cls_end"
                            @click="end(row)">结课</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-pagination background layout="prev, pager, next,jumper->, total,sizes"
                :total="StaffStore2.pagination.total" v-model:page-size="StaffStore2.pagination.pageSize"
                :page-sizes="[6, 8, 10, 12]" v-model:current-page="StaffStore2.pagination.currentPage"
                @size-change="StaffStore2.updateList()" @current-change="StaffStore2.updateList" />
        </el-footer>
    </el-container>
    <el-dialog title="班级编辑-新增" v-model="classEdit.isEdit">
        <el-form>
            <el-form-item label="班级名称">
                <el-input v-model="classEdit.model.cls_name"></el-input>
            </el-form-item>
            <el-form-item label="班级专业" prop="cls_dic_id_major">
                <el-select v-model="classEdit.model.cls_dic_id_major">
                    <el-option :value="0" label="-请选择-"></el-option>
                    <el-option v-for="item in category" :key="item.dic_id" :value="item.dic_id"
                        :label="item.dic_name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="教学老师" prop="cls_dic_id_major">
                <el-select v-model="classEdit.model.cls_clsr_id">
                    <el-option :value="0" label="-请选择-"></el-option>
                    <el-option v-for="item in category" :key="item.dic_id" :value="item.dic_id"
                        :label="item.dic_name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="教务老师" prop="cls_dic_id_major">
                <el-select v-model="classEdit.model.cls_stf_id_teacher">
                    <el-option :value="0" label="-请选择-"></el-option>
                    <el-option v-for="item in category" :key="item.dic_id" :value="item.dic_id"
                        :label="item.dic_name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="就业老师" prop="cls_dic_id_major">
                <el-select v-model="classEdit.model.cls_stf_id_admin">
                    <el-option :value="0" label="-请选择-"></el-option>
                    <el-option v-for="item in category" :key="item.dic_id" :value="item.dic_id"
                        :label="item.dic_name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级备注">
                <el-input style="width: 380px" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容" v-model="classEdit.model.cls_remark">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="classEdit.isEdit = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 分班 -->
    <el-dialog :title="'教室分配 - ' + classEdit.model.cls_name" v-model="classEdit.isBegin" width="500px"
        :append-to-body="false" :modal-append-to-body="false">
        <el-form ref="formClassroom">
            <el-form-item label="教室选择" prop="cls_clsr_id" rule="rules.cls_select">
                <el-select v-model="classEdit.model.cls_clsr_id" :value="0">
                    <el-option label="- 请选择 -" :value="0"></el-option>
                    <el-option v-for="item in StaffStore1.allFuncs" :key="item.clsr_id" :value="item.clsr_id"
                        :label="item.clsr_name" :disabled="item.clsr_occupy !== 0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button type="primary" @click="beginClass">确认分配并开课</el-button>
            <el-button @click="classEdit.isBegin = false">取消</el-button>
        </div>
    </el-dialog>



</template>

<script setup lang="ts">

import { onMounted, ref, computed, watch, nextTick, reactive, markRaw, Raw } from "vue";
import { useStaff } from "@/store";
import { StaffApi } from "@/api";
import { ClassApi } from "@/api";
import { useClassroom } from "@/store";
import { useClass } from "@/store";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
const StaffStore1 = useClassroom();
const StaffStore = useStaff();
const StaffStore2 = useClass();

const category = computed(() => {
    return StaffStore.dictionaryList.filter(
        (item) => item.dic_group_key === "class_major"
    );
});


const classEdit = reactive<{ isEdit: boolean; isBegin: boolean; formRef: null | FormInstance; model: Vm.Class; rules: Raw<FormRules> }>({
    isEdit: false,
    isBegin: false,
    model: {
        cls_id: 0,
        cls_name: '',
        cls_dic_id_major: 0,
        cls_clsr_id: 0,
        cls_stf_id_teacher: 0,
        cls_stf_id_admin: 0,
        cls_remark: '',
        cls_stf_id_job: 0,
        cls_begin: "",
        cls_end: "",
        stf_id: 0,
        stf_name: ""
    },
    formRef: null,
    rules: markRaw({
        user_name: [
            { required: true, message: "* 用户名不能为空", trigger: "blur" },
            { min: 2, max: 2, message: "* 用户名长度 2 - 2", trigger: "blur" }

        ],
    }),
});
onMounted(async () => {
    try {
        await StaffStore.getDictionary();

        StaffStore2.updateList();
        StaffStore1.init();
    } catch (e) {
        /**/
    }
});
const beginAdd = (() => {
    classEdit.formRef?.resetFields();
    classEdit.model = {
        cls_id: 0,
        cls_name: '',
        cls_dic_id_major: 0,
        cls_clsr_id: 0,
        cls_stf_id_teacher: 0,
        cls_stf_id_admin: 0,
        cls_remark: '',
        cls_stf_id_job: 0,
        cls_begin: "",
        cls_end: "",
        stf_id: 0,
        stf_name: ""
    }
    nextTick(() => classEdit.isEdit = true);
})
const beginUpdate = (cls: Vm.Class) => {
    classEdit.formRef?.resetFields();
    classEdit.model.cls_id = cls.cls_id;
    classEdit.model.stf_id = cls.stf_id;
    classEdit.model.cls_name = cls.cls_name;
    classEdit.model.cls_clsr_id = cls.cls_clsr_id
    classEdit.model.cls_dic_id_major = cls.cls_dic_id_major;
    classEdit.model.cls_stf_id_teacher = cls.cls_stf_id_teacher;
    classEdit.model.cls_stf_id_admin = cls.cls_stf_id_admin;
    classEdit.model.cls_stf_id_job = cls.cls_stf_id_job

    classEdit.model.cls_remark = cls.cls_remark
    nextTick(() => classEdit.isEdit = true);
};
const save = async () => {
    try {
        await classEdit.formRef?.validate();
        await StaffStore2[classEdit.model.cls_id === 0 ? "add" : "update"](classEdit.model);
        ElMessage({ type: 'success', message: "角色编辑成功" })
        classEdit.isEdit = false;
    } catch (e) {/** */ }
}
const start = async (item: Vm.Class) => {
    try {

        await ElMessageBox.confirm('确定开课: ' + item.cls_name + ' ?', "操作", { confirmButtonText: '开始课程', type: "warning" })
        classEdit.model = { ...item }
        classEdit.isBegin = true
    } catch (e) {/**/ }
}
const end = async (item: Vm.Class) => {
    try {
        await ElMessageBox.confirm('确定结课: ' + item.cls_name + ' ?', "操作", { confirmButtonText: '结课', type: "warning" })
        await ClassApi.end({ cls_id: item.cls_id })
        ElMessage({ type: 'success', message: "操作成功" })
    } catch (e) {/**/ }
}
const beginClass = async () => {
    try {
        await classEdit.formRef?.validate();
        const data = { cls_clsr_id: classEdit.model.cls_clsr_id, cls_id: classEdit.model.cls_id }
        await ClassApi.begin(data)
        classEdit.isBegin = false;
        ElMessage({ type: 'success', message: "操作成功" })
    } catch (e) {/**/ }
}
</script>

<style scoped lang="stylus">
.invalid
  color: red
  display inline-block
  width 100%
  text-align: center
.invalid.act
  color: green
</style>
